import React, { Component } from 'react'
import './index.css'

export default class Footer extends Component {

	// 全选
	handelCheckAll=(event)=>{
		this.props.handelAllTodo(event.target.checked)
	}

	// 删除已选择
	handelClearAllDone = ()=>{
		this.props.clearAllDone()
	}

	render() {
	const {todos} = this.props
	const doneCount = todos.reduce((pre,todo)=>{
		return pre + (todo.done ? 1 : 0)
	},0)
	const total = todos.length

		return (
			<div className="todo-footer">
				<label>
					<input type="checkbox" onChange={this.handelCheckAll} checked={doneCount=== total &&total !== 0 ? true : false} />
				</label>
				<span>
					<span>已完成 {doneCount}</span> / 全部{total}
				</span>
				<button className="btn btn-danger" onClick={this.handelClearAllDone}>清除已完成任务</button>
			</div>
		)
	}
}
